<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first" code="" style="font-size: 18px!important;"></el-tab-pane>
      <el-tab-pane label="电信" name="second" code="01"></el-tab-pane>
      <el-tab-pane label="联通" name="fourth" code="02"></el-tab-pane>
      <el-tab-pane label="移动" name="third" code="03"></el-tab-pane>
    </el-tabs>

    <div class="ring_main">

      <epm-search-layout style="padding: 0;">
        <template v-slot:left>
          <el-button type="success" :disabled="tableData.length===0" @click="exportTable">
            <span class="iconfont icon-tuichu" style="font-size: 12px"></span>&nbsp;&nbsp;导出</el-button>
        </template>
        <template v-slot:right>
          <div class="template-advanced-query">
            <dl class="template-advanced-query__explicit">
              <dt>业务状态：</dt>
              <dd>
                <el-select v-model="queryParam.businessState" clearable placeholder="请选择" @change="doQuery">
                  <el-option v-for="{code,name} in codeTable.businessState" :label="name" :value="code"
                             :key="code"></el-option>
                </el-select>
              </dd>
              <dt>业务类型：</dt>
              <dd>
                <el-select v-model="queryParam.businessType" clearable placeholder="请选择" @change="doQuery">
                  <el-option v-for="{code,name} in codeTable.businessType" :label="name" :value="code"
                             :key="code"></el-option>
                </el-select>
              </dd>
              <dd>
                <el-input placeholder="请输入卡号或开卡人" v-model="queryParam.cardNoOrCardOpener"
                          @keyup.enter.native="doQuery">
                  <i slot="prefix" class="el-input__icon el-icon-search" @click="doQuery"/>
                </el-input>
              </dd>
              <dd>
                <el-button class="template-advanced-query__toggle" type="text" @click="togglePopupAdvancedQuery">
                  {{ isOpenAdvancedQuery ? "收起 <" : "更多 >" }}
                </el-button>
                <transition name="el-zoom-in-top">
                  <div class="template-advanced-query__popup" v-show="isOpenAdvancedQuery">
                    <el-row :gutter="20">
                      <el-col :span="8">
                        <label>账期选择：</label>
                        <el-date-picker value-format="yyyy-MM-dd" v-model="queryParam.dateStart" type="date"
                                        placeholder="请选择日期"/>
                        <span class="date-interval">-</span>
                        <el-date-picker value-format="yyyy-MM-dd" v-model="queryParam.dateEnd" type="date"
                                        placeholder="请选择日期"/>
                      </el-col>
                      <el-col :span="8">
                        <label>结算状态：</label>
                        <el-select v-model="queryParam.isSettlement" placeholder="请选择" clearable>
                          <el-option v-for="item in [{label:'已结算',value:'1'},{label:'未结算',value:'-1'}]"
                                     :key="item.value" :label="item.label" :value="item.value">
                          </el-option>
                        </el-select>
                      </el-col>
                    </el-row>
                    <div class="is-button-group">
                      <el-button class="el-button--danger" @click="cancel">取消</el-button>
                      <el-button type="primary" @click="doQuery();cancel()">确定</el-button>
                      <el-button type="primary" plain @click="queryParam = {}">重置</el-button>
                    </div>
                  </div>
                </transition>
              </dd>
          </dl>
        </div>
      </template>
    </epm-search-layout>
    <!-- // 工具栏 -->
    <el-table class="main-table" :data="tableData">
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="cardNo" label="卡号" width="100"></el-table-column>
      <el-table-column prop="operator" label="运营商" width="80">
        <template slot-scope="scope">
          {{ getOperatorName(scope.row.operator) }}
        </template>
      </el-table-column>
      <el-table-column prop="aaaaNoTypeName" label="靓号类型" min-width="150"></el-table-column>
      <el-table-column prop="minPackageName" label="最低消费套餐" min-width="150"></el-table-column>
      <el-table-column prop="businessTypeName" label="办理业务" width="100"></el-table-column>
      <el-table-column prop="orderPackageName" label="开卡套餐" min-width="150"></el-table-column>
      <el-table-column prop="commission" label="佣金" width="50"></el-table-column>
      <el-table-column prop="businessStateName" label="业务状态" width="100"></el-table-column>
      <el-table-column prop="createTime" label="提交时间" width="150"></el-table-column>
      <el-table-column prop="handleUserName" label="办理人" width="120"></el-table-column>
      <el-table-column prop="handleTime" label="办理时间" width="150"></el-table-column>
      <el-table-column prop="id" label="工单编号" min-width="120"></el-table-column>
      <el-table-column label="操作" fixed="right" width="140">
        <template slot-scope="scope">
          <el-link type="primary" :underline="false" :disabled="scope.row.businessState !== 'REJECT'"  @click="toEditOrder(scope.row)" style="font-size: 12px;">编辑</el-link>
          <el-link type="primary" :disabled="scope.row.businessState !== 'NOT_HANDLE'" :underline="false" style="margin-left: 12px;font-size: 12px;" @click="revoke(scope.row)">撤回</el-link>
          <el-link type="primary" :underline="false" @click="toShopOrderView(scope.row)" style="font-size: 12px;margin-left: 12px">详情</el-link>
        </template>
      </el-table-column>
    </el-table>
    <simple-pager ref="pager"  class="ring_pagination" requestType="post" request-url="/openCardOrder/shop/list"
                  :defaultParam="{sortProp: 'createTime', sortOrder: 'descending'}" :tableData.sync="tableData"/>

    </div>
  </div>


</template>

<script>
import request from "@/utils/Request";
import {operatorCode, noCardState, getOperatorName, getNoCardStateName} from "@/common/PublicCode";
import SimplePager from "@/components/SimplePager";
import {downLoad} from "@/utils/DownLoadUtil";
import EventBus from '@/utils/EventBus'

export default {
  name: "MaintenanceManager",
  components: {SimplePager},
  data() {
    return {
      operatorCode: operatorCode,
      noCardState: noCardState,
      activeName: 'first',
      packageList: [],
      currentPackage: {},
      currentOperator: '',
      queryParam: {},
      tableData: [],
      aaaaNoTypeList: [],
      getOperatorName: getOperatorName,
      getNoCardStateName: getNoCardStateName,
      codeTable: {businessState: [], businessType: []},
      isOpenAdvancedQuery: false
    };
  },
  mounted() {
    this.initCodeTable();
    EventBus.$on('saveOrderSuccess', () => {
      this.doQuery();
    });
  },
  methods: {
    toEditOrder(_row) {
      this.$router.push({path: '/CardOpen', query: {orderId: _row.id}});
    },
    async exportTable() {
      const confirm = await this.$confirm('是否确认导出?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return true;
      }).catch(() => {
        return false;
      });
      if (!confirm) {
        return;
      }
      this.$message("正在导出，请稍后...");
      downLoad.bind(this);
      downLoad("/openCardOrder/exportShopOrderList", this.queryParam)
    },
    cancel() {
      this.isOpenAdvancedQuery = false;
    },
    togglePopupAdvancedQuery() {
      this.isOpenAdvancedQuery = !this.isOpenAdvancedQuery;
    },
    async revoke(_row) {
      const _confirm = await this.$confirm('工单一旦撤销将无法恢复, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return true;
      }).catch(() => {
        return false;
      });
      if (!_confirm) {
        return;
      }
      request.post("/openCardOrder/shop/revoke",{id:_row.id}).then(({data}) => {
        if (data.success) {
          this.$message({type: 'success', message: "工单撤销成功"});
          this.doQuery();
        } else {
          this.$message({type: 'warning', message: data.message});
        }
      }).catch(err => {
        this.$message({type: 'error', message: "工单撤销失败"});
        console.log(err)
      })
    },
    toShopOrderView(_row) {
      this.$router.push({path: '/ShopOrderView', query: {id: _row.id}});
    },
    initCodeTable() {
      request.get("/common/getCodeEnum").then(({data}) => {
        if (data.success) {
          this.codeTable = data.data;
        } else {
          throw new Error()
        }
      }).catch(err => {
        this.$message({type: 'error', message: "查询码表失败"});
        console.log(err)
      })
    },
    doQuery() {
      if (!!this.$refs.pager) {
        this.$refs.pager.doQuery(this.queryParam);
      }
    },
    handleClick(tab, event) {
      this.queryParam.operator = tab.$attrs.code;
      this.doQuery();
    },
  }
}
</script>

<style scoped>
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.ring_main {
  background: #fff;
  padding: 20px;
  min-height: 500px;
  position: relative;
}

.ring_container {
  background: #ffffff;
  /* padding: 20px;*/
  border-radius: 3px;
  width: 100%;
  height: 500px;
}

.ring_container > .ring_left_menu {
  /* width:200px;*/
  background: none;
  border-right: 1px solid #f2f2f2;
  padding: 20px;

}

.ring_left_menu > .el-icon-plus {
  font-size: 14px;
}

.ring_left_menu .el-icon-edit, .ring_left_menu .el-icon-delete {
  margin-left: 10px;
}

.dialog-footer {
  height: 70px;
  align-items: center;
  display: flex;
  justify-content: center;
}
.ring_pagination{
  position: absolute;
  bottom: 0;
  width:-webkit-calc(100% - 40px);
  width:-moz-calc(100% - 40px);
  width:calc(100% - 40px);
}

</style>